<template>
  <div class="goods_new">
    <van-nav-bar title="增票资质" left-arrow @click-left="goback"/>
    <div style="background:#fff;padding: 0 10px;">
      <div class="posR" style="background: rgb(255, 255, 255); padding: 0px 10px;">
      <div class="tit">营业执照（上传图片）</div>
      <div v-if="!licenseImg" class="van-uploader" @click="showItem">
        <div class="van-uploader__wrapper">
          <div class="van-uploader__upload"><i class="van-icon van-icon-plus van-uploader__upload-icon"><!----></i></div>
          </div>
      </div>
      <div v-if="licenseImg" class="van-uploader__preview"><div class="van-image van-uploader__preview-image"><img :src="licenseImg" class="van-image__img" style="object-fit: cover;"></div></div>
    </div>
      <van-cell-group>
        <van-field class="border-bottom" v-model="name" placeholder="企业名称" />
        <van-field class="border-bottom" v-model="phone" placeholder="企业电话" />
        <van-field class="border-bottom" v-model="address" placeholder="企业注册地址" />
        <van-field class="border-bottom" v-model="licenseNumber" placeholder="纳税人识别号" />
        <van-field class="border-bottom" v-model="bank" placeholder="开户行" />
        <van-field class="border-bottom" v-model="bankNumber" placeholder="银行账户" />
      </van-cell-group>
      
    </div>
    <div class="buttonPos">
      <van-button @click="submitHandle" type="danger" size="large">提交</van-button>
    </div>
    <van-action-sheet
      v-model="show"
      :actions="actions"
      cancel-text="取消"
      @select="onSelect"
      @cancel="show=false"
    />
  </div>
</template>

<script>
import { invoiceDetail, invoiceAdd, invoiceEdit, uploadBASE64, invoiceDistinguish } from '@/api/api';
import { Toast, Field, CellGroup, Uploader, DropdownMenu, DropdownItem, ActionSheet } from 'vant';
import scrollFixed from '@/mixin/scroll-fixed';

export default {
  mixins: [scrollFixed],

  data() {
    return {
      show: false,
      actions: [
        { name: '使用相机', value: 'Camera' },
        { name: '打开相册', value: 'SAVEDPHOTOALBUM'  },
      ],
      invoiceId: '',
      name: '',
      phone: '',
      address: '',
      licenseNumber: '',
      bank: '',
      bankNumber: '',
      loading: false,
      licenseImg: '',
      licenseImgList: []
    };
  },

  mounted () {
    this.init()
  },

  methods: {
    init() {
      invoiceDetail().then(res => {
        // console.log(res)
        if(res.data.errno === 0) {
          this.invoiceId = res.data.data.invoice.id
          this.name = res.data.data.invoice.name
          this.phone = res.data.data.invoice.phone
          this.address = res.data.data.invoice.address
          this.licenseNumber = res.data.data.invoice.licenseNumber
          this.bank = res.data.data.invoice.bank
          this.bankNumber = res.data.data.invoice.bankNumber
        }
      })
    },
    
    submitHandle() {
      if(this.name === '') {
        Toast('请填写企业名称');
        return false
      }
      if (this.phone === '') {
        Toast('请填写正确的电话');
        return false
      }
      if(this.address === '') {
        Toast('请填写企业注册地址');
        return false
      }
      if(this.licenseNumber === '') {
        Toast('请填写纳税人识别号');
        return false
      }
      if(this.bank === '') {
        Toast('请填写开户行');
        return false
      }
      if(this.bankNumber === '') {
        Toast('请填写银行账户');
        return false
      }
      if (this.invoiceId) {
        invoiceEdit({invoiceId: this.invoiceId,name: this.name, phone: this.phone, address: this.address, licenseNumber: this.licenseNumber, bank: this.bank, bankNumber: this.bankNumber}).then(res => {
        if (res.data.errno === 0) {
          Toast('修改成功');
          this.$router.go(-1);
        } else {
          Toast(res.data.errmsg);
          this.$router.go(-1);
        }
        })
      } else {
        invoiceAdd({name: this.name, phone: this.phone, address: this.address, licenseNumber: this.licenseNumber, bank: this.bank, bankNumber: this.bankNumber}).then(res => {
        if (res.data.errno === 0) {
          Toast('添加成功');
          this.$router.go(-1);
        } else {
          Toast(res.data.errmsg);
          this.$router.go(-1);
        }
        })
      }
      // shopRegister({name: this.name, member: this.member, mobile: this.mobile, address: this.address, storeId: this.storeId, shopImg: this.shopImg, licenseImg: this.licenseImg}).then(res => {
      //   console.log(res)
      //   if (res.data.errno === 0) {
      //     Toast('注册成功');
      //     this.$router.go(-1);
      //   } else {
      //     Toast(res.data.errmsg);
      //     this.$router.go(-1);
      //   }
      // })
    },
    goback() {
      this.$router.go(-1);
    },
    showItem() {
      this.show = true
    },
    onSelect(item) {
      // 默认情况下点击选项时不会自动收起
      // 可以通过 close-on-click-action 属性开启自动收起
      this.show = false;
      let type = ''
      if(item.value === 'Camera') {
        type = 1
      } else {
        type = 0
      }
      var cameraOptions={
        quality: 50,
        sourceType: type,
        destinationType: Camera.DestinationType.DATA_URL
      };
      //此处是官网提供的调用方法
      navigator.camera.getPicture(this.onSuccess, this.onFail, cameraOptions);
    },
    onFail() {
    },
    onSuccess(imageData) {
      let formData = new FormData()
      formData.append('file', "data:image/jpeg;base64," + imageData)
      // console.log(file, 'upload')
      uploadBASE64({imgCode: "data:image/jpeg;base64," + imageData}).then(res => {
        // console.log(res.data, 'upload')
        if(res.data.errno === 0) {
          // Toast('上传成功');
          this.licenseImg = res.data.data.url
          invoiceDistinguish({imgUrl: this.licenseImg}).then(info => {
            if (info.data.errno === 0) {
              this.name = info.data.data.Name
              this.address = info.data.data.Address
              this.licenseNumber = info.data.data.RegNum
            } else {
              Toast(info.data.errmsg);
            }
          })
        } else {
          Toast(res.data.errmsg);
        }
      })
      
      // var image = document.getElementById('myImage');
      // this.demo = "data:image/jpeg;base64," + imageData;
    },
  },

  components: {
    [CellGroup.name]: CellGroup,
    [Field.name]: Field,
    [Uploader.name]: Uploader,
    [DropdownMenu.name]: DropdownMenu,
    [DropdownItem.name]: DropdownItem,
    [ActionSheet.name]: ActionSheet,
    Toast
  }
};
</script>

<style lang="scss" scoped>
/deep/.van-cell {
  padding: 10px 0;
}
/deep/.van-cell:not(:last-child)::after {
  left: 0;
}
/deep/.van-uploader__preview-delete {
  display: none;
}
/deep/.van-dropdown-menu__item {
  justify-content: left;
}
/deep/.van-dropdown-menu__title {
  padding: 0;
}
/deep/.van-dropdown-menu__title::after {
  left: 20rem;
  right: 0;
}
/deep/.van-dropdown-item__option {
  padding: 10px;
}
.posR {
  position: relative;
}
.zishu {
  position: absolute;
  right: 10px;
  top: 0;
}
.tit {
  color: #999;
  margin-top: 5px;
  padding-top: 5px;
  margin-bottom: 5px;
}
.buttonPos {
  position: absolute;
  bottom: 20px;
  display: block;
  left: 20px;
  right: 20px;
}
.tit {
  color: #999;
  margin-top: 5px;
  padding-top: 5px;
  margin-bottom: 5px;
}
</style>